<template>
    <div class="line">
        <div class="title">
            <p>未来七天游客趋势图</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const charts = ref(null);
onMounted(() => {
    const myCharts = echarts.init(charts.value);
    myCharts.setOption({
        xAxis: {
            type: 'category',
            boundaryGap: false,//两侧不留白
            splitLine: {
                show: false
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
            // 去除分割线
            splitLine: {
                show: false
            },
            // 显示轴线
            axisLine: {
                show: true
            },
            // 显示刻度
            axisTick: {
                show: true
            },
        },
        grid: {
            left: 25,
            right: 30,
            top: 30,
            bottom: 20
        },
        series: {
            type: 'line',
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
            smooth: true,//平滑曲线
            areaStyle: { //设置填充区域样式
                color: 'rgba(255, 255, 255, 0.1)'
            }
        }
    })
})
</script>

<style scoped lang="scss">
.line {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% 100%;

    .title {
        margin-left: 20px;

        p {
            font-size: 20px;
            color: #fff;
        }
    }

    .charts {
        height: calc(100%);
        width: 100%;
    }
}
</style>